<template>
    <div>
        <p v-show="isShow()">
            
            <span @click="noadd">-</span>
            <span>{{num}}</span>
        </p>
            <span @click="add">+</span>
    </div>
    
</template>
<script>
export default {
    props:['num','id'],
    methods:{
        isShow(){
            return this.num > 0 ? true : false;
        },
        add(){
            this.bus.$emit('add',this.id)
        },
        noadd(){
            this.bus.$emit('noadd',this.id)
        }
    }
}
</script>
<style lang="scss" scoped>
    div{
        width:100px;
        height:30px;
        margin-top: 20px;
        display: flex;
          p{
            width:60px;
            height:30px;

            span{
                display: inline-block;
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid #eee;
                border-radius: 50%;
                background: orange;
                color: #fff;
                font-weight: bold;
                float: left;
            }
        
        }
          span{
                display: inline-block;
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid #eee;
                border-radius: 50%;
                background: orange;
                color: #fff;
                font-weight: bold;
            }
        
    }
  
</style>


